<template>
  <div>
    <div id="line4"></div>
  </div>
</template>

    <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line4"));

      this.chart.setOption({
        title: {
          text: "一周内人口舆论增长率",
          textStyle: {
            color: "white"
          }
        },
        grid: {
          top: "18%",
          left: "4%",
          right: "2%",
          bottom: "8%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(v) {
            return (
              v[0].name +
              ":" +
              v[0].data.toString().replace(/(\d)(?=(\d{3})+(\.|$))/g, "$1,")
            );
          }
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9"
            }
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256"
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: "#d1e6eb"
            }
          }
        },
        series: [
          {
            name: "数值",
            type: "line",
            markPoint: {
              label: {
                normal: {
                  textStyle: {
                    color: "#000"
                  }
                }
              },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            data: [12320.23, 12812.2, 13223.91, 33323.34, 22120, 23330, 12233.1]
          }
        ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

    <style lang="scss" scoped>
#line4 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>